import React, { PureComponent } from 'react'

import { Comment, Avatar, Tooltip } from 'antd'
import { DeleteOutlined } from '@ant-design/icons';

export default class CommentItem extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      content: ''
    }
  }

  render() {
    const { nickname, avater, content, datetime } = this.props.comment

    return (
      <Comment
        author={<a href="/#">{nickname}</a>}
        avatar={
          <Avatar
            src={avater}
            alt={nickname}
          />
        }
        content={ <p>{content}</p> }
        datetime={
          <Tooltip title={datetime.format('YYYY-MM-DD HH:mm:ss')}>
            <span>{datetime.fromNow()}</span>
          </Tooltip>
        }
        actions={[
          <span onClick={ e => this.props.removeComment() }><DeleteOutlined /> Delete</span>
        ]}
      />
    )
  }
}

